<template>
    <div class="docToReadDetail">
        <fl-navBar dark :border="false" title="查看" color="#000000" fixed background-color="#ffffff" status-bar
            left-icon="left" />
        <scroll-view class="docToReadDetail" scroll-y>
            <view class="detail_container">
                <view class="collapse-item">
                    <view class="detail_content">
                        <view class="detail_item">
                            <text class="item_key">来文编号</text>
                            <text class="item_value">{{ doc.sendNo }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">收文分类</text>
                            <text class="item_value">{{ doc.sendCategory == 1 ? '上级来文' : doc.sendCategory == 2 ? '学院通知' :
                                '其他单位来文'
                            }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">公文字号</text>
                            <text class="item_value">{{ doc.bumphNo }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">缓急程度</text>
                            <text class="item_value">{{ doc.urgencyLevel == 1 ? '平急' : doc.urgencyLevel == 2 ? '加急' : '特急'
                            }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">来文日期</text>
                            <text class="item_value">{{ doc.sendDate }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">公文类型</text>
                            <text class="item_value">{{ doc.bumphType }}</text>
                        </view>
                        <view class="detail_item doc_theme">
                            <text class="item_key">来文标题</text>
                            <text class="item_value">{{ doc.bumphTitle }}</text>
                        </view>
                        <view class="detail_item">
                            <text class="item_key">来文单位</text>
                            <text class="item_value">{{ doc.sendUnit }}</text>
                        </view>
                        <view class="detail_readMsg">
                            <view class="doc_file" v-if="doc.fileList">
                                <view class="item_file">公文附件</view>
                                <view class="file_name" @tap="handlePrev(dd)" v-for="(dd, ii) in doc.fileList" :key="ii">{{
                                    dd.originalName }}
                                </view>
                            </view>
                        </view>
                        <view class="detail_item doc_theme">
                            <text class="item_key">备注</text>
                            <text class="item_value">{{ doc.remark ? doc.remark : '暂无' }}</text>
                        </view>
                        <view class="detail_item doc_theme" v-show="type == 5">
                            <text class="item_key">意见</text>
                            <text class="item_value">{{ doc.feedback ? doc.feedback : '暂无' }}</text>
                        </view>
                        <view class="detail_item doc_theme" v-show="type == 3">
                            <text class="item_key">阅办意见</text>
                            <text class="item_value">{{ doc.feedback ? doc.feedback : '暂无' }}</text>
                        </view>
                        <view class="detail_item doc_theme">
                            <text class="item_key">阅办记录</text>
                            <view class="readed_item" v-if="doc.subList && doc.subList.length > 0">
                                <view class="readed_item" style="border-bottom: 0;" v-for="(item, index) in doc.subList"
                                    :key="index">
                                    <view class="who_read">{{ item.feedback }}</view>
                                    <view class="who_status"><text>{{ item.issueObjectName }}</text> <text class="read">{{
                                        item.status == 0 ? '' : '已阅办' }}</text> <text class="read_time">{{
        item.completionTime }}</text>
                                    </view>
                                </view>
                            </view>
                            <view v-else class="read_empty">暂无阅办记录</view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="submitBtn_box" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px', flex: 'none' }">
            <view class="submitBtn">
                <view @tap="back" class="back">返回</view>
                <view @tap="handleRevoke" v-if="sendStatus == 3 && type == 1" class="back remove">撤销办结</view>
            </view>
        </view>
    </div>
</template>
  
<script setup lang="ts">
import store from '@/store';
import { getWanderDetail, revokeFinish } from '@/api/http'
import { viewFile } from '@/utils/common'
import { ref } from 'vue'
import modal from '@/plugins/modal'
import { onLoad } from "@dcloudio/uni-app";
const { safeAreaInsets } = uni.getSystemInfoSync()
const props = defineProps(['id', 'type', 'sendStatus'])
const doc: any = ref({ fileList: [] })
const { bumph_type } = store.getters


onLoad(() => {
    getList()
})

const handleRevoke = async (ele: any) => {
    const res = await modal.confirm('是否撤销办结当前功能')
    if (res) {
        await revokeFinish({ innerIssueId: doc.value.innerIssueId })
        modal.msgSuccess('操作成功')
        setTimeout(() => {
            uni.$emit('read')
            back()
        }, 1000);


    }
}

const getList = async () => {
    const res = await getWanderDetail(props.id)
    doc.value = res.data
    doc.value.bumphType = filters(res)
}
const back = () => {
    uni.navigateBack()
}

const filters = (res: any) => {
    let re = bumph_type.find(ele => {
        return ele.dictValue == res.data.bumphType
    })
    return re.dictLabel
}
const handlePrev = async (ele: any) => {
    viewFile(ele)
}
</script>
  
<style scoped lang="scss">
.docToReadDetail {
    display: flex;
    flex-direction: column;
    height: 100%;

}


.Textarea {

    padding-left: 10rpx;
    color: #333;
}

.docToReadDetail {
    flex: 1;
    height: 100%;
    overflow: hidden;
    background-color: #fff;

    .detail_container {
        height: 100%;
        padding: 0 30rox 0 25rpx;

        .collapse-item {
            height: 100%;
            background-color: #fff;
            // border-bottom: 2rpx solid #EBEDF0;

            .doc_msg {
                display: flex;
                align-items: center;
                height: 100rpx;
                font-size: 32rpx;
                font-weight: 700;
                color: #000;
                padding-left: 25rpx;

                .line {
                    width: 6rpx;
                    height: 30rpx;
                    background-color: #2362A6;
                    margin-right: 12rpx;
                }
            }

            .detail_content {
                width: 710rpx;
                margin: 0 auto;


                .detail_item {
                    display: flex;
                    padding: 0 10rpx;
                    min-height: 90rpx;
                    justify-content: space-between;
                    align-items: center;
                    background-color: #fff;
                    border-bottom: 2rpx solid #EBEDF0;

                    .item_key,
                    .item_value {
                        color: #333333;
                        font-size: 28rpx;
                    }

                    .readed_item {
                        width: 100%;
                        padding: 20rpx 0;
                        border-bottom: 2rpx solid #EBEDF0;

                        .who_read {
                            width: 100%;
                            color: #333;
                            font-size: 28rpx;

                            margin: 10rpx 0 15rpx 0;
                        }

                        .who_status {
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;

                            .read {
                                color: #2362A6;
                                padding: 0 8rpx;
                            }

                            .read_time {
                                padding-top: 5rpx;
                            }
                        }
                    }
                }

                .doc_theme {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    padding: 20rpx 10rpx 40rpx 10rpx;


                    .item_key {
                        margin-bottom: 10rpx;
                    }

                    .item_value {
                        margin-bottom: 10rpx;
                        line-height: 40rpx;
                    }
                }
            }

            .detail_readMsg {
                width: 710rpx;
                margin: 0 auto;

                .doc_file {
                    padding: 25rpx 0rpx 0;

                    .advice {
                        font-size: 28rpx;
                        color: #333;
                    }

                    .item_file {
                        color: #333;
                        font-size: 28rpx;
                        margin: 0 0 10rpx 0;
                    }

                    .file_name {
                        display: flex;
                        align-items: center;
                        color: #0D80D7;
                        font-size: 28rpx;
                        line-height: 40rpx;
                        border-bottom: 2rpx solid #EBEDF0;
                        // padding-bottom: 25rpx;
                        min-height: 110rpx;

                        &:last-child {
                            border-bottom: none;
                        }

                    }

                    .lz_obj {
                        padding-bottom: 6rpx;
                    }

                    .lzObject {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 28rpx;
                        color: #000;
                        min-height: 90rpx;

                        .more {
                            display: flex;
                            align-items: center;
                            color: #959595;

                            .iconfont {
                                transform: rotate(180deg);
                                color: #959595;
                                font-size: 30rpx;
                                margin-left: 10rpx;
                            }

                        }
                    }
                }
            }

        }
    }
}




.submitBtn_box {
    margin: 0 auto;

    .submitBtn {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 750rpx;
        background-color: #fff;


        .back {
            width: 40%;
            height: 90rpx;
            border: 2rpx solid #DCDCDC;
            border-radius: 45rpx;
            color: #000;
            font-size: 28rpx;
            text-align: center;
            line-height: 90rpx;
        }

        .remove {
            background-color: red;
            color: #fff;
            border: none;
        }
    }
}
</style>
  